
import React, { useEffect,useState } from 'react'

import { Search } from 'react-vant';
import { ALLDATALIST, GETLISTDATA,CHILDATA,FILTERSHOU } from '../../../types/index.d'
import axios from '../../../axioslist/index'
import { Sidebar, Toast } from 'react-vant';
import '../../../api/index'
import { useDispatch, useSelector } from 'react-redux'
export default function Guangguang() {
  const dispatch = useDispatch()
  const [active, setActive] = useState(2);
  const [value, setValue] = useState('');
  useEffect(() => {
    axios.get('/api/list').then(res => {
      dispatch({
        type: GETLISTDATA,
        payload: res.data.list
      })
    })
  }, [])

  const data = useSelector((state: ALLDATALIST) => {
    return state.list
  })
  console.log(data);

  const data1 = useSelector((state:ALLDATALIST)=>{
    return state.childata
  })
  console.log(data1,1111111111111111);

  
  
  const onfilr = ()=>{
    console.log(111);
    
  }
  




  
  return (
    <div>
       <div className="iour">
        <Search value={value} onChange={setValue} placeholder="请输入搜索关键词" /> <button onClick={()=>onfilr()}>搜索</button>
      </div>
      <Sidebar
        value={active}
        onChange={(v) => {
          setActive(v);
          Toast.info(`标签名 ${v + 1}`);
        }}
      >
        {
          data.map((item,index)=>{
            return <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title={item.user}>
              <ul>
                
              </ul>
              {
                data1.map((item,index)=>{
                  return <li>
                    <p>{item.user}</p>
                    
                    <img src={item.img} alt="" />
                  </li>
                  
                })
              }
      </Sidebar.Item>
          })
        }
        
      
      </Sidebar>
    </div>
  )
}

